{% extends "base.html" %}
{% load i18n %}

{% block sub_title %}{% trans "Set Password" %} - {% endblock %}

{% block extra_style %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/bootstrap.popover.min.css" />
{% endblock %}

{% block main_content %}
<div class="new-narrow-panel vh">
    <h2 class="hd">{% trans "Set Password" %}</h2>
    <form action="" method="post" class="con">{% csrf_token %}

        {% if form.contact_email %}
        <label for="id_contact_email">{% trans "Contact Email" %}</label>
        {{ form.contact_email }}
        {{ form.contact_email.errors }}
        {% endif %}

        <label for="id_new_password1">{% trans "Password" %}</label><br />
        {{ form.new_password1 }}<br />    {{ form.new_password1.errors }}
        <div id="pwd_strength"></div>
        <label for="id_new_password2">{% trans "Confirm Password" %}</label><br />
        {{ form.new_password2 }}<br />    {{ form.new_password2.errors }}
        <p class="error hide"></p>
        <input type="submit" value="{% trans "Submit" %}" class="submit" />
    </form>
</div>
{% endblock %}

{% block extra_script %}
<script type="text/javascript" src="{{MEDIA_URL}}js/bootstrap.min.js"></script>
<script type="text/javascript">
$('[type="email"], [type="password"]').addClass('input');
$('.new-narrow-panel').removeClass('vh');

{% if strong_pwd_required %}
{% include "snippets/password_strength_js.html" %}
var passwd_tip = "{% blocktrans %}Passwords must have at least {{min_len}} characters and contain {{level}} of the following: uppercase letters, lowercase letters, numbers, and symbols.{% endblocktrans%}";
$("#id_new_password1")
.popover({ // bootstrap plugin 'popover'
    container: 'body',
    content: passwd_tip,
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
    trigger: 'focus'
})
.on('keyup', function() {
    var pwd = $(this).val();
    if ($.trim(pwd)) {
        var level = getStrengthLevel(pwd);
        showStrength(level);
    } else {
        $("#pwd_strength").html("");
    }
});
{% endif %}

$('form').on('submit', function(){
    var pwd1 = $.trim($('input[name="new_password1"]').val()),
        pwd2 = $.trim($('input[name="new_password2"]').val());

    if (!pwd1) {
        $('.error').html("{% trans "Password cannot be blank" %}").removeClass('hide');
        return false;
    }
    if (!pwd2) {
        $('.error').html("{% trans "Please enter the password again" %}").removeClass('hide');
        return false;
    }
    if (pwd1 != pwd2) {
        $('.error').html("{% trans "Passwords don't match" %}").removeClass('hide');
        return false;
    }

    {% if strong_pwd_required %}
    var level = getStrengthLevel(pwd1);
    if (level < {{level}}) {
        $('.error').html(passwd_tip).removeClass('hide');
        return false;
    }
    {% endif %}
});
</script>
{% endblock %}
